<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="root">
    <p>{{ content }}</p>
    <p>_uid: {{_uid}}</p>
    <p>fn(): {{fn()}}</p>
    <p>xxx: {{xxx}}</p>
    <p>yyy: {{yyy()}}</p>
  </div>
  <script>
    const vm = new Vue({
      data: {
        content: 'abc',
        msg: 123
      }
    })
    vm.fn = () => 'fn函数'
    Vue.prototype.xxx = '原型链上的属性'
    vm.__proto__.yyy = () => '原型链上的方法'

    vm.$mount('#root')

    setTimeout(() => {
      vm.content = vm.content.split('').reverse().join('')
      console.log(vm._data.content) // cba
    }, 2000);
    
    console.log(vm)
    console.log(vm._data.content, vm.content) // abc

    /* 
    问题1. 模板中读取数据的来源?  
      vm对象自身或原型链上的属性或方法
    问题2. 读取vm的属性, 读取的为什么是data对象中的属性
    问题3: 向vm保存属性, 数据为什么会保存data对象中
      利用defineProperty给vm添加了与data对象中对应的同名属性
          get方法: 读取data对象中的同名属性返回
          set方法: 将设置的最新值保存到data对象的同名属性上
      这个效果的名称: 数据代理   vm来代理内部data对象的属性操作(读/写)
          不用代理: vm._data.xxx
          用代理: vm.xxx
          好处: 简化编码
    */


  </script>

  <script>
    /* 
    Object.defineProperty(obj, 属性名, {
      get () {},
      set (value) {}
    })
    */
    const p = {
      firstName: 'A',
      lastName: 'B'
    }
    /* 
    需求: 给p添加一个新属性: fullName, 值: firstName-lastName
      如果更新了firstName或lastName, fullName也要同步更新
      如果更新了fullName, firstName和lastName也要同步
    */
    //  p.fullName = p.firstName + '-' + p.lastName
    Object.defineProperty(p, 'fullName', {
      // 当读取fullName属性自动调用, 返回值就是属性值
      get () {
        console.log('get')
        return this.firstName + '-'  + this.lastName
      },
      // 当给fullName设置新值时自动调用, 用来监视fullName的改变的
      set (value) {  // E-F
        // 根据最新的value, 更新firstName和lastName
        const names = value.split('-')   // ['E', "F"]
        this.firstName = names[0]
        this.lastName = names[1]
      }
    })
    console.log(p.fullName) // A-B
    p.firstName = 'C'
    p.lastName = 'D'
    console.log(p.fullName) // C-D
    p.fullName = 'E-F'
    console.log(p.firstName, p.lastName) // E  F
   
  </script>
</body>
</html>